<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      @keyup.enter.native="search()"
    >
      <el-form-item label="同步时间">
        <br />
        <br />
        <el-date-picker
          v-model="formInline.syncTimeRange"
          style="margin-left: -70px; width: 400px"
          align="right"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :clearable="false"
        />
      </el-form-item>

      <el-form-item label="商品名称">
        <br />
        <br />
        <el-input
          v-model="formInline.spuName"
          style="margin-left: -70px; width: 200px"
          placeholder="请输入商品名称"
        />
      </el-form-item>

      <div style="width: 100%; display: flex; justify-content: flex-end">
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="search()"
            size="mini"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="kong()"
            size="mini"
            icon="el-icon-delete"
            >清空</el-button
          >
        </el-form-item>
      </div>
    </el-form>

    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column type="index" width="60" label="序号" align="center" />
      <el-table-column prop="spuNames" label="同步商品" show-overflow-tooltip align="center" />
      <el-table-column prop="syncTime" label="同步时间" align="center" />
      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="
              (detail = scope.row.goodsGaodeRecordsInfoDTOList), (show = true)
            "
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="margin-top: 5px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <DetailVue :show.sync="show" :detailList="detail" />
  </div>
</template>

<script>
import { post } from "@/utils/request";
import DetailVue from "../components/GoodsDetail.vue";
export default {
  components: {
    DetailVue,
  },
  data() {
    return {
      formInline: {
        syncTimeRange: [],
        storeName: "",
      },

      tableData: [],
      loading: false,
      listQuery: {
        current: 1,
        size: 20,
      },
      total: 0,

      detail: null,

      show: false,
    };
  },

  created() {
    this.search();
  },

  methods: {
    search() {
      post("/api/user-service/v1/goodsGaodeRecordsInfo/queryGoodsGaodeRecordsInfoList", {
        condition: {
          spuName: this.formInline.spuName,
          syncBeginTime: this.formInline.syncTimeRange[0],
          syncEndTime: this.formInline.syncTimeRange[1],
        },
        ...this.listQuery,
      }).then((res) => {
        if (res.code == 1) {
          this.tableData = res.records;
          this.total = res.total;
          this.listQuery.current = res.current;
          this.listQuery.size = res.size;
        }
      });
    },

    kong() {
      this.formInline = this.$options.data().formInline;
    },

    handleSizeChange(val) {
      this.listQuery.size = val;
      this.listQuery.current = 1;
      this.search();
    },

    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.search();
    },
  },
};
</script>../components/ShopDetail.vue